<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="common.css" rel="stylesheet">
    <script src="vue.min.js"></script>
</head>
<body>
<div id="div1">
    <input type="text" v-model="a1">
    <input type="text" v-model="a2">
    <p id="p1"></p>
</div>
<script>
    var vm = new Vue({
        el : "#div1",
        data : {
            a1 : 0,
            a2 : 0
        },
        //监听属性
        watch : {
            a1 : function (a1val) {
                this.a1 = a1val;
                this.a2 = this.a1 * 10;
            },
            a2 : function (a2val) {
                this.a2 = a2val;
                this.a1 = this.a2 / 10;
            }
        }
    })
    vm.$watch("a1",function (newa1,olda1) {
        document.getElementById("p1").innerHTML = "原值：" + olda1 + "，新值：" + newa1;
    })
</script>
</body>
</html>